.queryContainer {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.queryEditor {
  flex-grow: 1;

  overflow-y: auto;
  div, cm-editer{
    &::-webkit-scrollbar {
      width: 13px;
      height: 13px;
    }
    &::-webkit-scrollbar-corner {
      background: var(--color-scrollbar);
    }
    &::-webkit-scrollbar-track {
      background: var(--color-scrollbar-track);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-scrollbar);
    }
    &:hover::-webkit-scrollbar-thumb {
      background: var(--color-scrollbar-hover);
    }
  }
}

.queryNameEditor {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  padding: 0px 10px;

  input {
    color: var(--color-text);
    font-size: 14px;
    background: var(--color-surface);
    outline: none;
    border: 2px solid var(--color-surface);
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: bold;

    &:focus {
      border: 2px solid var(--color-surface-hover)
    }
  }
}
